import React, { Component } from 'react';  
import "./technologyStack.scss"; 
import { technologyStack } from "../../api/lxc";
import { Row, Col } from 'antd';
import RateComponent from "./components/rate.js";
import { Icon } from 'antd'; 

class TechnologyStackComponent extends Component {
  constructor(props){
  	super(props);
  	this.state={
        homeData:{list:[]},
		bodyState:false,
		lodingShow:false,
  	}
  }
  componentWillMount(){
  	  let time=null,
		  num=-1;
    //请求首页数据
    this.setState({ lodingShow : true })//显示loding
    technologyStack().then(res=>{
      this.setState({
        homeData : res.data.data, 
		lodingShow:false
      }) 
	  setTimeout(()=>{
		  this.setState({
			  bodyState:true
		  })
	  }, 100);
    })
  }	
  render() {    
    return (
      <div className="technologyStackConainer">
		<div className="technologyStack_warp">
			<Row>
				{
					this.state.homeData.list.map((item,index)=>{
						return (<Col className="gutter-row" md={6} key={index}>
							<div className="gutter-box" style={{transform: `rotateY(${this.state.bodyState?'0deg':'-90deg'})`}}>
								<a href={item.goRouter} target="_blank">
									<div className="headerImg"><img src={item.img} alt=""/></div>
									<p className="p_1">{item.technicalName}</p>
									<p className="p_2">{item.technicaInfo}</p> 
									<RateComponent defaultValue={item.rate}/>
								</a>
							</div>
						</Col>)
					})
				}
			</Row>
		</div>
      </div>
    )
  }
} 
export default TechnologyStackComponent;